import React, { useEffect, useState } from "react";
import instance from "./api/request";
import { Space, Table } from "antd";
import type { TableProps } from "antd";
import { Button, Popconfirm } from "antd";
import { Input } from "antd";
import { Modal } from "antd";
import {  Form } from "antd";

function App() {
  const [table, setTable] = useState([]);
  const [pageCode, setPageCode] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const [searchValue, setSearchValue] = useState("");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [form] = Form.useForm();
  const [xinzz, setXinzz] = useState("");

  const getday = () => {
    const params = { pageCode, pageSize };
    instance
      .get("/list", {
        params,
      })
      .then((res) => {
        console.log(res);
        setTable(res.data.data.data);
        setTotal(res.data.code);
      });
  };

  useEffect(() => {
    getday();
  }, [pageCode, pageSize, searchValue]);

  //分页
  const fen = (pageCodecurrent: number, pageSizecurrent: number) => {
    setPageCode(pageCodecurrent);
    setPageSize(pageSizecurrent);
  };

  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "地址",
      dataIndex: "shopAddress",
      key: "shopAddress",
    },
    {
      title: "详情",
      dataIndex: "shopDescription",
      key: "shopDescription",
    },
    {
      title: "数量",
      dataIndex: "shopScore",
      key: "shopScore",
    },
    {
      title: "图片",
      dataIndex: "shopImage",
      key: "shopImage",
      render: () => (
        <img src="{text}" alt="" style={{ width: "100px", height: "100px" }} />
      ),
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <button onClick={() => edit(record)}>编辑</button>

          <Popconfirm
            title="Delete the task"
            description="您确定要删除吗?"
            onConfirm={() => confirm(record.id)}
            // onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <button>删除</button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const edit = (data) => {
    setXinzz("edit");
    setIsModalOpen(true);
    form.setFieldsValue(data);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onFinish = async (values) => {
    if (xinzz === "edit") {
      instance.post("/list", values).then((res) => {
        console.log(res);
        
        getday();
        setIsModalOpen(false);
      });
    }
    if (xinzz === "add") {
      instance.put("/list", values).then((res) => {
        console.log(res);
        
        getday();
        setIsModalOpen(false);
      });
    }
  };

  const xinz = () => {
    setXinzz("add");
    form.resetFields()
    setIsModalOpen(true);
  };

  //删除
  const confirm = (id) => {
    instance
      .delete("/list", {
        params: {
          id,
        },
      })
      .then((res) => {
        console.log(res);
        getday();
      });
  };

  //搜索
  const { Search } = Input;
  const onSearch = (value) => {
    instance
      .get("/list", {
        params: {
          searchValue: value,
        },
      })
      .then((res) => {
        console.log(res);
        setTable(res.data.data.data);
        setTotal(res.data.code);
      });
  };

  return (
    <div>
      <Button onClick={xinz}>新增</Button>
      <Search
        placeholder="input search text"
        onSearch={onSearch}
        style={{ width: 200 }}
      />
      <Table<DataType>
        columns={columns}
        dataSource={table}
        pagination={{
          total: total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `Total ${total} items`,
          onChange: fen,
        }}
      />

      <Modal
        footer={null}
        title={xinzz === "edit" ? "编辑" : "新增"}
        closable={{ "aria-label": "Custom Close Button" }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          // onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          {xinzz === "edit" && (
            <Form.Item
              label="id"
              name="id"
              // rules={[{ required: true, message: "Please input your username!" }]}
            >
              <Input disabled />
            </Form.Item>
          )}

          <Form.Item
            label="地址"
            name="shopAddress"
            // rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="详情"
            name="shopDescription"
            // rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="数量"
            name="shopScore"
            // rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="图片"
            name="shopImage"
            // rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
            <Button onClick={handleOk}>取消</Button>
          </Form.Item>
        </Form>
      </Modal>


          <h1>我是新分支</h1>

    </div>
  );
}

export default App;
